<template>
  <div class="resultInfo">
    <p class="p_tip">基本信息</p>
    <el-form label-width="100px">
      <el-form-item label="检测时间：">
        <span>{{form.detectionTime}}</span>
      </el-form-item>
      <el-form-item label="通知名称：">
        <span>{{form.notificationName}}</span>
      </el-form-item>
      <el-form-item label="检测总人数：">
        <span>{{form.detectionNumber}}</span>
      </el-form-item>
      <el-form-item label="未登记人数：">
        <span>{{form.noRegisterNum}}</span>
      </el-form-item>
      <el-form-item label="未检测人数：">
        <span>{{form.noDetectionNum}}</span>
      </el-form-item>
      <el-form-item label="阳性人数：">
        <span>{{form.sunNum}}</span>
      </el-form-item>
      <el-form-item label="未转运人数：">
        <span>{{form.noTransportNum}}</span>
      </el-form-item>
    </el-form>
    <p class="p_tip">检测名单</p>
    <el-form :inline="true" :model="formInline">
      <el-form-item label="姓名">
        <el-input size="small" clearable v-model="formInline.name"></el-input>
      </el-form-item>
      <el-form-item label="小区名称">
        <el-select size="small" clearable filterable v-model="formInline.community" placeholder="请选择">
          <el-option
            v-for="item in optionsList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测结果">
        <el-select clearable size="small" v-model="formInline.detectionResult" placeholder="请选择">
          <el-option label="阳性" :value="1"></el-option>
          <el-option label="阴性" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="转运情况">
        <el-select clearable size="small" v-model="formInline.userStatus" placeholder="请选择">
          <el-option label="未转运" :value="1"></el-option>
          <el-option label="已转运" :value="2"></el-option>
          <el-option label="已治愈" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否检测">
        <el-select clearable size="small" v-model="formInline.ifDetection" placeholder="请选择">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!--    table表格-->
    <div class="btnBox">
      <el-button size="small" type="primary" @click="exportNucleinDetectionResultDetails">导出</el-button>
      <el-button size="small" type="primary" @click="dialogVisible = true">已检测名单导入</el-button>
      <el-button size="small" type="primary" @click="handleAdd">安排二次核酸</el-button>
    </div>
    <el-table
      header-cell-class-name="header-class"
      :data="tableData"
      size="small"
      :row-key="getRowKeys"
      border
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="40">
      </el-table-column>
      <el-table-column
        prop="address"
        label="居住地址"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="userName"
        label="姓名"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="phoneNumber"
        label="手机号码">
      </el-table-column>
      <el-table-column
        prop="ifDetection"
        label="是否检测">
        <template slot-scope="{row}">
          <span v-if="row.ifDetection==1">是</span>
          <span v-if="row.ifDetection==2">否</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="detectionResult"
        label="检测结果">
        <template slot-scope="{row}">
          <span v-if="row.detectionResult==1">阳性</span>
          <span v-if="row.detectionResult==2">阴性</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="{row}">
          <el-button type="text" size="small" @click="handleResult(row)">修改结果</el-button>
          <el-button type="text" size="small" @click="handleResult1(row)">查看密接</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :small="true" :total="page_total" @pageChange="pageChange" :page="page"></Pagination>
    <!--    table表格-->

    <!--    导入检测名单-->
    <el-dialog title="导入管理" :visible.sync="dialogVisible" width="400px">
      <el-upload
        ref="upload"
        :limit="1"
        drag
        :on-change="handleChange"
        accept=".xls,xlsx"
        class="upload"
        :auto-upload="false"
        :file-list="file"
        :on-remove="handleRemove"
        action="#"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
        </span>
    </el-dialog>
    <!--    导入检测名单-->

    <!--    修改结果弹窗-->
    <el-dialog
      title="修改结果"
      :visible.sync="dialogVisible1"
      width="400px"
      :close-on-click-modal="false">
      <el-form label-width="90px">
        <el-form-item label="检测结果：">
          <el-select v-model="model" placeholder="请选择">
            <el-option label="阳性" :value="1"></el-option>
            <el-option label="阴性" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible1 = false">取 消</el-button>
        <el-button size="small" type="primary" @click="updateDetectionResult">确 定</el-button>
      </span>
    </el-dialog>
    <!--    修改结果弹窗-->
    <!--    查看密接弹窗-->
    <el-dialog
      title="查看密接"
      :visible.sync="dialogVisible2"
      width="800px"
      :close-on-click-modal="false">
      <p class="dialogTip">阳性人员</p>
      <el-form :inline="true">
        <el-form-item label="姓名：">
          <span>{{yanForm.userName}}</span>
        </el-form-item>
        <el-form-item label="居住地址：">
          <span>{{yanForm.address}}</span>
        </el-form-item>
      </el-form>
      <p class="dialogTip">密接人员</p>
      <el-table
        header-cell-class-name="header-class"
        :data="tableData1"
        size="small"
        border>
        <el-table-column
          prop="userName"
          label="姓名"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="phoneNumber"
          label="手机号码"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="healthStatus"
          label="本次核酸结果"
          show-overflow-tooltip>
          <template slot-scope="{row}">
            <span v-if="row.healthStatus==1">阳性</span>
            <span v-if="row.healthStatus==2">阴性</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
    <!--    查看密接弹窗-->
  </div>
</template>

<script>
  import {exportExcel} from '../../utils/util'

  export default {
    name: "resultInfo",
    data() {
      return {
        form: {
          detectionTime: '',
          notificationName: '',
          detectionNumber: '',
          noRegisterNum: '',
          noDetectionNum: '',
          sunNum: '',
          noTransportNum: '',
        },
        formInline: {name: '', community: '', detectionResult: '', userStatus: '', ifDetection: ''},
        optionsList: [],
        tableData: [{name: 1111}],
        tableData1: [{name: 1111}],
        page: {
          page_index: 1,
          page_limit: 10
        },
        page_total: 0, //总条数
        dialogVisible: false,
        dialogVisible1: false,
        dialogVisible2: false,
        model: 1,
        file: [],
        multipleSelection: [],
        currentId: null,
        yanForm: {userName: '', address: ''}
      }
    },
    methods: {
      // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
      getRowKeys(row) {
        return row.id
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      pageChange(item) {
        this.page.page_index = item.page_index;
        this.page.page_limit = item.page_limit;
      },
      handleResult(row) {
        this.dialogVisible1 = true
        this.currentId = row.id
      },
      handleResult1(row) {
        this.dialogVisible2 = true
        this.currentId = row.id
        this.yanForm.userName = row.userName
        this.yanForm.address = row.address
        this.querycloseContactInfo()
      },
      handleSearch() {
        this.page.page_index = 1
        this.init()
      },
      init() {
        let params = {
          pageNo: this.page.page_index,
          pageSize: this.page.page_limit,
          detectionId: this.form.id,
          ...this.formInline
        }
        this.$ajax.peng.queryNucleinDetectionResultDetails(params).then(data => {
          this.tableData = data.data.records
          this.page_total = data.data.total
        })

      },
      //查询所有小区
      getSubBuildList() {
        let params = {
          level: 1,
        }
        this.$ajax.peng.getSubBuildList(params).then(data => {
          this.optionsList = data.data
        })
      },
      //导出
      exportNucleinDetectionResultDetails() {
        this.init()
        let params = {
          detectionId: this.form.id,
          ...this.formInline,
        }
        this.$ajax.peng.exportNucleinDetectionResultDetails(params).then(data => {
          exportExcel(data, '检测名单.xls')
        })
      },
      //选择文件
      handleChange(file, fileList) {
        this.file = fileList;
      },

      handleRemove(file, fileList) {
        this.file = fileList
      },
      // 导入
      submitFileForm() {
        if (this.file.length == 0) {
          this.$message.warning('请选择文件')
          return false
        }
        var formData = new FormData();
        formData.append("file", this.file[0].raw);
        formData.append("detectionId", this.form.id);
        this.$ajax.peng.uploadNucleinDetectionResultDetails(formData).then((data) => {
          this.$message.success('导入成功')
          this.init()
          this.dialogVisible = false;
          this.file = [];
        });
      },
      //安排二次核酸
      handleAdd() {
        if (this.multipleSelection.length > 0) {
          this.$router.push({path: '/apply/addApply', query: {data: JSON.stringify(this.multipleSelection)}})
        } else {
          this.$message.warning('请选择人员')
        }
      },
      // 修改检测结果
      updateDetectionResult() {
        let params = {
          detectionId: this.form.id,
          detectionResult: this.model,
          userId: this.currentId,
        }
        this.$ajax.peng.updateDetectionResult(params).then(data => {
          this.dialogVisible1 = false;
          this.$message.success('修改成功')
          this.init()
        })
      },
      // 查看密接
      querycloseContactInfo() {
        let params = {
          detectionId: this.form.id,
          userId: this.currentId,
        }
        this.$ajax.peng.querycloseContactInfo(params).then(data => {
          this.tableData1 = data.data
        })
      }
    },

    mounted() {
      let data = JSON.parse(this.$route.query.row)
      this.form = {...data}
      this.getSubBuildList()
      this.init()
    },
  }
</script>

<style lang="scss">
  .resultInfo {
    .el-form {
      display: flex;
      flex-wrap: wrap;
    }

    .el-form-item__content {
      text-overflow: ellipsis;
      overflow: hidden;
      width: 226px;
      margin-right: 30px;
    }

    .el-form-item {
      margin-bottom: 6px;
    }

    .el-form--inline .el-form-item__content {
      width: 146px !important;
    }

    .el-table {
      margin-top: 40px;
    }

    .el-dialog__body .el-table {
      margin-top: 0
    }

    .dialogTip {
      font-weight: bold;
      margin-bottom: 5px;
      font-size: 16px;
    }

  }

</style>
